<template>
	<view class="search">
		<view class="top f ai-c">
			<!-- <view class="f ai-c type" @click="showType">
				<view>全部分类</view>
				<u-icon name="arrow-down" color="#747780" size="15"></u-icon>
			</view> -->
			<view class="search-box f f1 ai-c">
				<image src="../../static/search.png"></image>
				<u--input placeholder="请输入" border="none" v-model="content" fontSize="12" @confirm="handleSearch"></u--input>
			</view>
		</view>
		<view class="often">大家都在搜</view>
		<view class="f f-w">
			<view class="hot f ai-c" v-for="(item,index) in hotList" :key="index" @click="handleHotSearch(item)">
				<image src="../../static/hot.png"></image>
				{{item.content}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		hotSearch
	} from '@/api/index.js'
	import TypeModel from '@/components/TypeModel/index.vue'
	export default {
		components: {
			TypeModel
		},
		data() {
			return {
				hotList: [],
				content:''
			}
		},
		onShow() {
			this.getHotList()
		},
		methods: {
			handleHotSearch(item){
				uni.redirectTo({
					url:`/pages/search/searchList?content=${item.content}`
				})
			},
			handleSearch(){
				uni.redirectTo({
					url:`/pages/search/searchList?content=${this.content}`
				})
			},
			async getHotList() {
				const {
					data
				} = await hotSearch({})
				this.hotList = data
			},
			showType() {
				this.$refs.typeModel.setPopup();
			}
		}
	}
</script>

<style scoped lang="scss">
	.search {
		background: #f7f8fc;
		min-height: 100vh;
		padding: 32rpx;
		box-sizing: border-box;

		.hot {
			padding: 16rpx 24rpx;
			border-radius: 40rpx;
			background: #fff;
			font-size: 26rpx;
			margin-top: 24rpx;
			margin-right: 24rpx;

			image {
				width: 35rpx;
				height: 35rpx;
				margin-right: 8rpx;
			}
		}

		.often {
			font-size: 28rpx;
			margin-top: 32rpx;
			font-weight: 800;
		}

		.top {


			.search-box {
				height: 70rpx;
				border: 1px solid #1880fd;
				border-radius: 60rpx;
				margin-left: 16rpx;
				padding: 0 24rpx;
				box-sizing: border-box;

				image {
					width: 35rpx;
					height: 35rpx;
					margin-right: 16rpx;
				}
			}

			.type {
				font-size: 26rpx;

				view {
					margin-right: 8rpx;
				}
			}
		}
	}
</style>